.x-slider-field-extended .x-component-outer {
  padding: 0.5em;
}

.x-slider-field-extended .x-slider-helper {
  width: 30%;
}

.x-slider-field-extended .x-slider-helper .x-slider-helper-input {
  width: 100%;
  margin: 0.5em 0 0 0;
  padding: 0.1em 0.1em;
  height: 2.2em;
  border: 1px solid #CCC;
}

/* fix bug in ST 2.0.0: floating tab panel has wrong tab font color */
.x-container.x-fullscreen .x-tabbar.x-docked-top .x-button-label {
   text-rendering: auto;
}

/* fix bug in ST 2.0.1: ellipsis shown for header text in chrome */
.x-desktop .x-title .x-innerhtml{
   padding: 0;
}

/* fix bug in ST 2.0.0: no margin around the empty text message in a list */
.x-list-emptytext {
   margin: 0.6em;
}

/* fix bug in ST 2.0.1: scrollable toolbar on floating panel renders without background */
.x-panel.x-floating .x-toolbar .x-scroll-view {
    background-color: transparent;
}

/* overview styling */
.ovlistitem {
   font-size: 0.8em;
   line-height: 1.4em;
}
.ovlistitem h2 {
   font-weight: bold;
}
.ovlistitem label {
   opacity: 0.6;
   font-weight: bold;
}
.ovlistitem img {
   vertical-align: top;
}

.ovlistitem .warning {
   color: #c30000;
}

/* new ui hasChanges */
.x-button.x-button-hasChanges,
.x-button.x-button-hasChanges.x-button-back:after,
.x-button.x-button-hasChanges.x-button-forward:after,
.x-toolbar .x-button.x-button-hasChanges,
.x-toolbar .x-button.x-button-hasChanges.x-button-back:after,
.x-toolbar .x-button.x-button-hasChanges.x-button-forward:after,
.x-button.x-button-hasChanges-round,
.x-button.x-button-hasChanges-round.x-button-back:after,
.x-button.x-button-hasChanges-round.x-button-forward:after,
.x-toolbar .x-button.x-button-hasChanges-round,
.x-toolbar .x-button.x-button-hasChanges-round.x-button-back:after,
.x-toolbar .x-button.x-button-hasChanges-round.x-button-forward:after,
.x-button.x-button-hasChanges-small,
.x-button.x-button-hasChanges-small.x-button-back:after,
.x-button.x-button-hasChanges-small.x-button-forward:after,
.x-toolbar .x-button.x-button-hasChanges-small,
.x-toolbar .x-button.x-button-hasChanges-small.x-button-back:after,
.x-toolbar .x-button.x-button-hasChanges-small.x-button-forward:after {
    background-image: none;
    background-color: #c70505;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f91f1f), color-stop(3%, #e00606), color-stop(100%, #ae0404));
    background-image: -webkit-linear-gradient(top, #f91f1f,#e00606 3%,#ae0404);
    background-image: -moz-linear-gradient(top, #f91f1f,#e00606 3%,#ae0404);
    background-image: -o-linear-gradient(top, #f91f1f,#e00606 3%,#ae0404);
    background-image: linear-gradient(top, #f91f1f,#e00606 3%,#ae0404);
}
.x-button.x-button-hasChanges,
.x-toolbar .x-button.x-button-hasChanges,
.x-button.x-button-hasChanges-round,
.x-toolbar .x-button.x-button-hasChanges-round,
.x-button.x-button-hasChanges-small,
.x-toolbar .x-button.x-button-hasChanges-small {
    border: 1px solid #630303;
    border-top-color: #7c0303;
    background-color: #c70505;
    color: #fff;
}

/* synchronize page log */

.synchronizelog .log-header {
   border-radius: 0.4em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   padding-left: 0.5em;
   background: #132E71;
   color: white;
}
.synchronizelog .log-header:first-child {
   margin-top: 0;
}
.synchronizelog .log-error {
   padding-left: 1em;
   color: red;
}
.synchronizelog .log-text {
   padding-left: 1em;
   color: black;
}
.synchronizelog .log-link {
   text-align: right;
   font-size: 120%;
   margin-bottom: 4px;
}

/* activities list / documents list */
.listItem .x-list-item-label > div {
   overflow: hidden;
   font-size: 0.8em;
   margin-right: 1.5em;
}
.listItem .x-list-item-label label,
.listItem .x-list-item-label span {
   display: inline-block;
   height: 1.4em;
}
.listItem .x-list-item-label label {
   padding-right: 0.5em;
   font-weight: bold;
   opacity: 0.6;
}
.listItem .x-list-item-label span {
   padding-right: 1.0em;
   white-space: nowrap;
}


/* required form fields */
.x-field-required .x-form-label {
   color: #880000;
}


/* invalid form fields */
.x-field.invalid .x-component-outer {
   background-color: #eedddd !important;
}

/* text field with plus icon */
.x-field-search.mcs-field-plus .x-field-input:before{
/*   -webkit-mask-image: url('') !important;*/
   -webkit-mask-size: .86em;
   -webkit-mask-repeat: no-repeat;
}

/* message for no results */
.emptyText {
   text-align: center;
   padding: 0.5em 0;
}

.onlineMRUGroup .x-form-fieldset-title {
   opacity: 0.6;
   font-size: 90%;
   margin-top: 0.2em !important;
}

/* information card, apply to container */
.card em {
   color:#657b83
}
.card > .x-inner,.card .x-body > .x-inner,.card .x-inner:not(.x-toolbar-inner).x-scroll-scroller {
   display:-webkit-box;
   display:box;
   -webkit-box-orient:vertical;
   box-orient:vertical;
   -webkit-box-align:center;
   box-align:center;
   -webkit-box-pack:center;
   box-pack:center
}
.card .x-innerhtml{
   text-align:center;
   font-size:18px;
   line-height:24px;
   color:#444;
   text-shadow:0 1px 0 white;
   padding:10px;
   width:75%;
   margin:0 auto
}
.x-phone .card .x-innerhtml{
   text-align:left;
   width:auto;
   padding:20px
}

/* logo and skyline images */
.mcslogo>.x-inner,
.mcslogo>.x-scroll-view>.x-scroll-container>.x-inner{
   background-image: url("app/images/mcslogo.png");
   background-position: center 97%;
   background-repeat: no-repeat;
   background-size: 255px 153px;
}
.mcsskyline>.x-inner,
.mcsskyline>.x-scroll-view>.x-scroll-container>.x-inner{
   background-image: url("app/images/skyline.png");
   background-position: left bottom;
   background-repeat: repeat-x;
}

/* installation details card */
table.installationdetails tr {
   border-bottom: 1px solid #dedede;
}

/* smaller badge text on buttons */
.x-hasbadge .x-badge.badge-small {
   font-size: 0.5em !important;
}

/* read-only field styling */
.x-field.readonly .x-field-input, .x-field.readonly .x-field-input .x-input-el {
   background-color: #f7f7f7;
}
.x-field.readonly .x-form-label {
    background-color: #E4E4E4;
}


.icon-textarea-expand {
   background-image: none !important;
   background-color: #CBCBCB !important;
   -webkit-mask-image: url('') !important;
   -webkit-mask-size: 1.6em;
   -webkit-mask-repeat: no-repeat;
}

/* Pure CSS animated progress bars
 * http://css-tricks.com/css3-progress-bars/
 * To use: {
 *    xtype: 'container',
 *    html: '<div class="progressbar animate orange"><span style="width: 90%"><span></span></span></div>'
 * }
 * Change 90% to the appropriate percentage.
 * Change "orange" to "red" or "green" to change the color.
 */

    .progressbar {
        height: 25px;  /* Can be anything */
        position: relative;
        margin: 60px 0 20px 0; /* Just for demo spacing */
        background: #555;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 3px;
        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
        -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
        box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
    }
    .progressbar > span {
        display: block;
        height: 100%;
           -webkit-border-top-right-radius: 20px;
        -webkit-border-bottom-right-radius: 20px;
               -moz-border-radius-topright: 20px;
            -moz-border-radius-bottomright: 20px;
                   border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
            -webkit-border-top-left-radius: 20px;
         -webkit-border-bottom-left-radius: 20px;
                -moz-border-radius-topleft: 20px;
             -moz-border-radius-bottomleft: 20px;
                    border-top-left-radius: 20px;
                 border-bottom-left-radius: 20px;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0, rgb(43,194,83)),
          color-stop(1, rgb(84,240,84))
         );
        background-image: -moz-linear-gradient(
          center bottom,
          rgb(43,194,83) 37%,
          rgb(84,240,84) 69%
         );
        -webkit-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow:
          inset 0 2px 9px  rgba(255,255,255,0.3),
          inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }
    .progressbar > span:after,
    .progressbar.animate > span > span {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background-image:
           -webkit-gradient(linear, 0 0, 100% 100%,
              color-stop(.25, rgba(255, 255, 255, .2)),
              color-stop(.25, transparent), color-stop(.5, transparent),
              color-stop(.5, rgba(255, 255, 255, .2)),
              color-stop(.75, rgba(255, 255, 255, .2)),
              color-stop(.75, transparent), to(transparent)
           );
        z-index: 1;
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        -webkit-animation: progressanimation 2s linear infinite;
           -webkit-border-top-right-radius: 20px;
        -webkit-border-bottom-right-radius: 20px;
               -moz-border-radius-topright: 20px;
            -moz-border-radius-bottomright: 20px;
                   border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
            -webkit-border-top-left-radius: 20px;
         -webkit-border-bottom-left-radius: 20px;
                -moz-border-radius-topleft: 20px;
             -moz-border-radius-bottomleft: 20px;
                    border-top-left-radius: 20px;
                 border-bottom-left-radius: 20px;
        overflow: hidden;
    }

    .progressbar.animate > span:after {
        display: none;
    }

    @-webkit-keyframes progressanimation {
        0% {
           background-position: 0 0;
        }
        100% {
           background-position: 50px 50px;
        }
    }

    /* progress bar colors: */

    .progressbar.green > span {
        /* default styling */
    }

    .progressbar.blue > span {
        background-color: #6ab5cf;
        background-image: -moz-linear-gradient(top, #6ab5cf, #318EAC);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #6ab5cf),color-stop(1, #318EAC));
        background-image: -webkit-linear-gradient(#6ab5cf, #318EAC);
    }

    .progressbar.orange > span {
        background-color: #f1a165;
        background-image: -moz-linear-gradient(top, #f1a165, #f25b0a);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f25b0a));
        background-image: -webkit-linear-gradient(#f1a165, #f25b0a);
    }

    .progressbar.red > span {
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }

/*time picker fix*/
.x-picker .x-picker-inner .x-innerhtml {
    display: none;
}
/*To highlight required fields*/
.fillIn .x-component-outer {
    border: 1px solid #CC0000;
    background-color: #EEA2A2 !important;
    padding: 0.2em;
}
/*will remove tap highlight at Android*/
textarea,
input{
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline-style: none;
}
/*Radio buttons adjustments*/
.x-form-fieldset .x-field-radio .x-component-outer,
.x-form-fieldset .x-field-radio .x-field-mask {
    height: 38px;
}
.x-form-fieldset .x-field-radio .x-field-mask::before {
    top: 18%;
}
.x-form-fieldset .x-field-radio .x-field-mask::after {
    top: 30%;
}
/*button size*/
.x-toolbar .x-button .x-button-label, .x-toolbar .x-button .x-badge {
    font-size: 14px;
    padding: 0;
}
.IPhoneBtn .x-toolbar .x-button .x-button-label,.IPhoneBtn .x-toolbar .x-button .x-badge {
    font-size: 13px;
}
.smallerBtnFont.x-toolbar .x-button .x-button-label,.smallerBtnFont.x-toolbar .x-button .x-badge {
    font-size: 13px;
}
.IPhoneBtn .smallerBtnFont.x-toolbar .x-button .x-button-label,.IPhoneBtn .smallerBtnFont.x-toolbar .x-button .x-badge {
    font-size: 12px;
}
.x-toolbar .x-button {
    margin: 0 0.2em 0 0;
    padding: 0.3em 0.5em;
}
.x-button.x-button-forward{
    height: 2.15em;
    padding-top: 0;
    padding-bottom: 0;
}
.IPhoneBtn .overviewPanel .x-button {
    margin: 0 0.1em 0px 0;
}
.x-button-label, .x-badge, .x-hasbadge .x-badge {
    line-height: 1.6em !important;
}
.x-button.x-button-back {
    height: 2.15em;
    padding-top: 0;
    padding-bottom: 0;
}
.x-tab .x-button-icon.globe1:before, .x-button .x-button-icon.globe1:before {
    line-height: 1.22em !important;
}
/*document preview*/
.noPreview p{
    color:  #CBCBCB !important;
    margin: 1em 0;
}
.documentPreviewInfo textarea {
     width: 100%;
     color: blue;
     border: 0;
     resize: none;
 }
.previewImgInitial {
    height: 35px;
    width: 100%;
    background-image: url("app/images/icons/green-loading.gif");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 35px 35px;
}
.previewImg{
    height: 90%;
    min-width: 260px;
    max-width: 98%;
    background-size: contain !important;
    background-position: center center;
}
.landscapeMode .previewImg{
    max-width: 101%;
}
.portraitMode .previewImg{
    max-width: 99%;
}
.landscapeMode.IPhoneBtn input,
.landscapeMode.IPhoneBtn textarea{
    width: 101%;
}
.portraitMode.IPhoneBtn input,
.portraitMode.IPhoneBtn textarea{
    width: 99%;
}
body {
    -webkit-user-select: none;
}
.consumptionHeader {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 3px;
}
.consumptionHeader img{
    margin-top: 5px;
    width: 32px;
}
.consumptionHeader .italic{
    font-size: 80%;
    font-style: italic;
}
.consumptionForm .x-item-disabled {
    display: none;
}
.woForm .x-item-disabled .x-form-label,
.woForm .x-item-disabled input,
.woForm .x-item-disabled .x-input-el,
.woForm .x-item-disabled .x-spinner-body,
.woForm .x-item-disabled select,
.woForm .x-item-disabled textarea,
.woForm .x-item-disabled .x-field-clear-container {
     color: #333333;
     -webkit-text-fill-color:  #333333 !important;
     opacity: 1 !important;
 }
.woForm input[type="search"]:disabled {
    color: #333333 !important;
    -webkit-text-fill-color:  #333333 !important;
    background-color: #fff;
    opacity: 1 !important;
}
.woItem .x-innerhtml{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}
.woItemInner {
    border-right: 6px solid #156FAE;
}
.woItem h2 {
    max-height: 3em;
    overflow: hidden;
    margin: 0 4em 6px 6px !important;
}
.woItemContainer {
    display: table;/*-webkit-box;*/
    height: 100%;
}
.woItemTable {
    /*width: 89%;
    width: -webkit-calc(100% - 2.6em);
    -webkit-box-flex: 1;*/
    vertical-align: top;
    margin: 0 0 0 6px !important;
}
.AndroidTablet .woItemTable {
    /*width: 94%;
    width: -webkit-calc(100% - 2.6em);*/
}
.woItemTable td{
    padding-bottom: 3px !important;
    vertical-align: top;
}
.woItemTable .label {
    width: 6em;
    font-weight: bold;
    opacity: 0.6;
}
.woItemTable .value {
    opacity: 1;
}
.woItemID {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 4em;
    padding: 0.3em;
    color: #FFF;
    background-color: #156FAE;
    border-bottom-left-radius: 6px;
    text-align: center;
}
.woItem .offlineBar {
    max-width: 2em !important;
    min-width: 2em !important;
    display: table-cell;
    background-color: #BCBCBC;
    vertical-align: top;
    padding-top: 0.1em;
}
.x-item-selected.woItem .offlineBar {
    background-color: transparent;
}
.woItem .offlineBar .icons > div{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    min-height: 1.5em;
    width: 1.5em;
    margin: 0.3em 0.3em 0.3em 0.22em;
    opacity: 0.3;
}
.woItem .offlineBar .activatedIcon{
    opacity: 1!important;
}
.woItem .offlineBar .pda{
    background-image: url("app/images/pda.png");
    opacity: 1 !important;
}
.woItem .offlineBar .error{
    background-image: url("app/images/error.png");
    margin: 0.6em 0 0.1em 0.22em !important;
}
.woItem .offlineBar .edit{
    background-image: url("app/images/pencil.png");
    background-size: 1.3em 1.3em !important;
}
.orderIcon{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}
.ascOrder {
    background-image: url("app/images/sort_ascending.png");
}
.descOrder {
    background-image: url("app/images/sort_descending.png");
}
.optionIcon {
    background-image: url("app/images/menu6.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.4em 1.5em;
}
.woItem .offlineButton {
    max-width: 3.2em !important;
    min-width: 3.2em !important;
    display: table-cell;
    vertical-align: top;
    padding-top: 0.1em;
}
.offlineButton.take {
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #0958A2),
        color-stop(1, #0236A7)
    );
    background-image: -webkit-linear-gradient(bottom, #0958A2 0%, #0236A7 100%);
}
.offlineButton.taken {
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #FFEE00),
        color-stop(1, #BFB630)
    );
    background-image: -webkit-linear-gradient(bottom, #FFEE00 0%, #BFB630 100%);
}
.offlineButton.offlineRemove,
.offlineButton.offlineSync,
.offlineButton.offlineSyncRemove,
.offlineButton.offline {
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #0FB107),
        color-stop(1, #149527)
    );
    background-image: -webkit-linear-gradient(bottom, #0FB107 0%, #149527 100%);
}
.offlineButton.errorRemove,
.offlineButton.errorSync,
.offlineButton.errorSyncRemove,
.offlineButton.error {
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #DB5304),
        color-stop(1, #BC3500)
    );
    background-image: -webkit-linear-gradient(bottom, #DB5304 0%, #BC3500 100%);
}


.takeOfflineMode .x-item-selected {
    background: none !important;
    border-top: 1px solid #dedede !important;
}

.takeOfflineMode .x-item-selected.woItem .offlineBar {
    background-color: #BCBCBC;
}
.offlineButton .button {
    width: 3.2em;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 2.6em 2.6em;
}
.logFontRed {
    color: #AE0A0A !important;
}
.logFontBlue {
    color: #1C67A0 !important;
}
.take .button {
    background-image: url("app/images/cloud_computing_download.png");
}
.taken .button,
.errorSync .button {
    background-image: url("app/images/pda_into.png");
}
.offline .button,
.error .button{
    background-image: url("app/images/pda.png");
}
.offlineRemove .button,
.errorRemove .button {
    background-image: url("app/images/pda_delete.png");
}
.offlineSync .button {
    background-image: url("app/images/pda_out.png");
}
.offlineSyncRemove .button,
.errorSyncRemove .button{
    background-image: url("app/images/pda_delete&upload.png");
}

.synchronizelog {
    border: 1px solid #666666;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    margin: 0.3em 0.2em;
    padding: 0.4em;
}
.synchronizelog .x-list{
    background-color: transparent !important;
}
.synchronizelog .x-list-normal .x-list-item.x-list-item-tpl {
    border-top: none !important;
    border-bottom: none !important;
}
.synchronizelog .x-list .x-list-item.x-list-item-tpl .x-innerhtml {
    padding: 1px;
}
.logitem .offlineButton {
    max-width: 1.8em !important;
    min-width: 1.8em !important;
    height: 2em;
    margin: 0 0.2em;
    vertical-align: top;
    padding-top: 0.1em;
}
.logitem .offlineButton .button {
    width: 1.8em;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1.4em 1.4em;
}
.logitem table.logItemTable td {
    padding-right: 0.3em;
    vertical-align: top;
}
table.logItemTable .woId {
    font-weight: bold;
    white-space: nowrap;
}
.logFontCancel table.logItemTable .woId {
    visibility: hidden;
}
.logFontCancel table.logItemTable .note {
    font-weight: bold;
}
.logFontSubitem table.logItemTable .woId {
    visibility: hidden;
    font-size: 10%;
}
.logFontSubitem table.logItemTable .note {
    font-weight: normal;
    color: #AE0A0A !important;
}

.disabled .x-form-label {
    background-color: #e4e4e4;
}

.optionsTitle .x-innerhtml {
    text-align: center;
    color: white !important;
    padding-bottom: 15px;
}

.offlineStatusPanel {
    background: #fb7657; /* Old browsers */
    background: -moz-linear-gradient(top,  #fb7657 0%, #fb7657 49%, #fb7657 49%, #f7553e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb7657), color-stop(49%,#fb7657), color-stop(49%,#fb7657), color-stop(100%,#f7553e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fb7657 0%,#fb7657 49%,#fb7657 49%,#f7553e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fb7657 0%,#fb7657 49%,#fb7657 49%,#f7553e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fb7657 0%,#fb7657 49%,#fb7657 49%,#f7553e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #fb7657 0%,#fb7657 49%,#fb7657 49%,#f7553e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb7657', endColorstr='#f7553e',GradientType=0 ); /* IE6-9 */
    padding: 0.3em;
    border: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #444;
    border-radius: 0;
}
.offlineStatusPanel.warning {
    background: #b7b5b6; /* Old browsers */
    background: -moz-linear-gradient(top,  #b7b5b6 0%, #959595 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7b5b6), color-stop(100%,#959595)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b7b5b6 0%,#959595 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b7b5b6 0%,#959595 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b7b5b6 0%,#959595 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b7b5b6 0%,#959595 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b5b6', endColorstr='#959595',GradientType=0 ); /* IE6-9 */
}
.portraitMode .offlineStatusPanel {
    height: 4em;
}
.landscapeMode .offlineStatusPanel {
    height: 3em;
}
.offlineStatusPanel.x-button-pressing {
    background: #f7553e; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7553e 1%, #fb7657 49%, #fb7657 49%, #fb7657 68%, #fb7657 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f7553e), color-stop(49%,#fb7657), color-stop(49%,#fb7657), color-stop(68%,#fb7657), color-stop(100%,#fb7657)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7553e 1%,#fb7657 49%,#fb7657 49%,#fb7657 68%,#fb7657 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7553e 1%,#fb7657 49%,#fb7657 49%,#fb7657 68%,#fb7657 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7553e 1%,#fb7657 49%,#fb7657 49%,#fb7657 68%,#fb7657 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7553e 1%,#fb7657 49%,#fb7657 49%,#fb7657 68%,#fb7657 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7553e', endColorstr='#fb7657',GradientType=0 ); /* IE6-9 */
}
.offlineStatusPanel.warning.x-button-pressing {
    background: #959595; /* Old browsers */
    background: -moz-linear-gradient(top,  #959595 0%, #b7b5b6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(100%,#b7b5b6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #959595 0%,#b7b5b6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #959595 0%,#b7b5b6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #959595 0%,#b7b5b6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #959595 0%,#b7b5b6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#b7b5b6',GradientType=0 ); /* IE6-9 */
}
.offlineStatusPanel .x-button-label {
    background: url("app/images/pda.png");
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 4em;
    color: #333;
    font-size: 0.7em;
    white-space: normal;
    text-align: left;
}
.offlineStatusPanel.warning .x-button-label {
    background: url("app/images/warning.svg");
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 4em;
    color: #333;
    font-size: 0.7em;
    white-space: normal;
    text-align: left;
}
.portraitMode .offlineStatusPanel .x-button-label  {
    padding-left: 5em;
}
.landscapeMode .offlineStatusPanel .x-button-label  {
    padding-left: 4em;
}
.syncOptionsView {
    padding: 0.5em;
}
.syncOptionsView .description {
    margin-bottom: 1em;
    font-size: 0.9em;
}
.syncOptionsView .btn {
    background: none;
    color: black;
    margin-bottom: 1em;
    padding: 0 !important;
}
.syncOptionsView .btn .x-button-icon {
    width: 4em !important;
    height: 4em !important;
    background-size: 70% 70%;
    border-right: 1px solid gray;
    border-radius: 5px;
    margin-right: 1em;
}
.syncOptionsView .btn .x-button-label {
    text-align: left;
    white-space: normal;
    font-style: italic;
    font-size: 0.9em;
}

.syncOptionsView .WOToBeTaken .x-button-icon {
    background: url("app/images/cloud_computing_download.png"), -webkit-linear-gradient(bottom, #0958A2 0%, #0236A7 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}
.syncOptionsView .WOTaken .x-button-icon {
    background: url("app/images/pda_into.png"), -webkit-linear-gradient(bottom, #FFEE00 0%, #BFB630 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}

.syncOptionsView .removeWOGreen .x-button-icon {
    background: url("app/images/pda_delete.png"), -webkit-linear-gradient(bottom, #0FB107 0%, #149527 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}
.syncOptionsView .removeWORed .x-button-icon {
    background: url("app/images/pda_delete.png"), -webkit-linear-gradient(bottom, #DB5304 0%, #BC3500 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}
.syncOptionsView .updateWORed .x-button-icon {
    background: url("app/images/pda_into.png"), -webkit-linear-gradient(bottom, #DB5304 0%, #BC3500 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}

.syncOptionsView .WORed .x-button-icon {
    background: url("app/images/pda.png"), -webkit-linear-gradient(bottom, #DB5304 0%, #BC3500 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}

.syncOptionsView .updateWOGreen .x-button-icon {
    background: url("app/images/pda.png"), -webkit-linear-gradient(bottom, #0FB107 0%, #149527 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}

.syncOptionsView .uploadWO .x-button-icon {
    background: url("app/images/pda_out.png"), -webkit-linear-gradient(bottom, #0FB107 0%, #149527 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}
.syncOptionsView .uploadChanges .x-button-icon {
    background: url("app/images/pda_delete&upload.png"), -webkit-linear-gradient(bottom, #0FB107 0%, #149527 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}
.syncOptionsView .discardChanges .x-button-icon {
    background: url("app/images/pda_delete.png"), -webkit-linear-gradient(bottom, #0FB107 0%, #149527 100%) !important;
    background-size: 80% 80%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center center, top left !important;
}
.offlineProgressBar {
    background-color: white;
    margin-right: 5px;
    overflow: hidden;
    border-top : 2px solid #777;
    border-left : 2px solid #777;
    border-bottom : 2px solid #aaa;
    border-right : 2px solid #aaa;
    border-radius: 5px
}
.offlineProgressBar .bar {
    background: rgb(59,141,213); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(59,141,213,1) 0%, rgba(131,191,221,1) 11%, rgba(85,152,215,1) 31%, rgba(61,134,213,1) 45%, rgba(50,101,184,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,141,213,1)), color-stop(11%,rgba(131,191,221,1)), color-stop(31%,rgba(85,152,215,1)), color-stop(45%,rgba(61,134,213,1)), color-stop(100%,rgba(50,101,184,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(59,141,213,1) 0%,rgba(131,191,221,1) 11%,rgba(85,152,215,1) 31%,rgba(61,134,213,1) 45%,rgba(50,101,184,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(59,141,213,1) 0%,rgba(131,191,221,1) 11%,rgba(85,152,215,1) 31%,rgba(61,134,213,1) 45%,rgba(50,101,184,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(59,141,213,1) 0%,rgba(131,191,221,1) 11%,rgba(85,152,215,1) 31%,rgba(61,134,213,1) 45%,rgba(50,101,184,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(59,141,213,1) 0%,rgba(131,191,221,1) 11%,rgba(85,152,215,1) 31%,rgba(61,134,213,1) 45%,rgba(50,101,184,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#3b8dd5\', endColorstr=\'#3265b8\',GradientType=0 ); /* IE6-9 */
    border-radius: 2px;
    line-height: 12px;
}
.locationWrap {
    background-color: #d4e6ee;
    border-bottom: 1px solid #9db8d5;
}
.locationWrap.disabled{
    background-color: #ebebe4;
}
.labelPanel{
    min-height: 40px;
    height: 100%;
}
.locationPathPanel{
    font-size: 9pt;
    color: #A9A9A9;
    font-style:italic;
    padding: 0px 10px;
    background-color: #fff;
}
.x-form-fieldset .x-field.locationWrap .x-form-label{
    border-top:0;
}
.x-form-fieldset .x-field.locationInput{
    border-bottom: 0;
}
.offlineOverview .x-list-paging {
    display: none;
}
.sla {
    padding: 0.3em;
    color: white;
    font-weight: bold;
    font-size: 0.8em;
    overflow: hidden;
    line-height: 2em;
    text-align: left;
    z-index: 3;
    position: relative;
    word-wrap: break-word;
}

.badSla {
    background: rgb(229, 57, 55);
}
.badSla:before  {
    background: rgb(229, 57, 55);
}
.goodSla {
    background: rgb(40, 147, 51);
}
.goodSla:before {
    background: rgb(40, 147, 51);
}
.tolerableSla {
    background: orange;
}
.tolerableSla:before {
     background: orange;
}
.woItemInnerBadSla {
    border-right: 6px solid rgb(229, 57, 55);
}
.woItemInnerGoodSla {
    border-right: 6px solid rgb(40, 147, 51);
}
.woItemInnerTolerableSla {
    border-right: 6px solid orange;
}

.disabledArrow .ovlistItem .x-list-disclosure {
    background-image: none !important;
    background-color: #AAA !important;
}

.disabledArrow .listItem .x-list-disclosure {
    background-image: none !important;
    background-color: #AAA !important;
}
.completedMark.x-form-fieldset .x-form-fieldset-inner {
    margin-top: 0.5em;
    border-radius: 0.5em;
    border-width: 2px;
    background-color: transparent !important;
}
.x-form.x-floating .completedMark .x-panel-inner {
    background-color: transparent;
}
.completedMark h3 {
    font-weight: bold;
    font-size: 85%;
    padding: 0.3em;
}
.completedMark p {
    font-style: italic;
    font-size: 70%;
    padding: 0.2em 0.3em;
}
.completedMark .x-field .x-field-input {
    max-width: 2.6em;
    min-width: 2.6em;
    background-color: #ffffff;
    border-radius: 0.5em;
}
.completedMark .x-input-el.x-input-checkbox {
    padding: .1em;
    min-height: 2.4em;
    max-height: 2.4em;
    border-width: 0;
    background-color: #ffffff;
}

.limit-text-two-lines {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#offlineprogress {
    background-color:lightyellow;
    border-bottom: 1px solid #000;
}

#offlineprogress #actionIndicator {
    background-image:url('app/images/image_642491.gif');
    width: 70px !important;
    height: 70px !important;
    margin: 4px !important;
}

#offlineprogress #actionIndicator .x-label {
    width: 70px !important;
    height: 70px !important;
    text-align: center;
    line-height: 70px;
    font-family: sans-serif;
    font-size: 11pt;
}

#offlineprogress #actionPanel {
    width: 100% !important;
    height: 100% !important;
    position: relative;
    margin-left: 4px;
}

#offlineprogress #actionPanel .x-label {
    font-size: 0.8em;
    font-style: italic;
    color: rgb(90, 90, 90);
    margin-bottom: 2px;
}

#offlineprogress #actionPanel .x-label.lblCount {
    font-size: 0.7em;
    position: absolute;
    bottom: 0;
}

#offlineprogress #actionPanel .offlineProgressBar {
    height: 16px !important;
}
.x-msgbox{
    max-width: 30em;
}